<template>
	<view class="my">
		<view class="bg_f flex flex-y-c">
			<view class="user-avatar" @click="chooseImage">
				<image :src="avatar_url" mode=""></image>
				<!-- <avatar-image :url="userInfo.avatar_url" :width="100" /> -->
			</view>
			<view class="m-l">
				{{userInfo.nick_name}}
			</view>
		</view>
		<view class="bg_f">
			<view class="flex flex-y-c flex-x-b h">
				<view class="">
					修改昵称
				</view>
				<view class="">
					<input type="text" style="width: 100%;" placeholder="请输入" v-if="!show" @blur="onInputTwo" >
				</view>
				<view class="" style="width: 50%;height: 100%;text-align: right;" @click="showChange" v-if="show">
					{{userInfo.nick_name}}
				</view>
				
			</view>
			<view class="flex flex-y-c flex-x-b h">
				<view class="">
					修改密码
				</view>
				<view class="">
					<input type="text" v-if="!showP" @blur="onInputP" >
				</view>
				<view class="" @click="showPChange" v-if="showP">
					修改密码
				</view>
			</view>
			<view class="flex flex-y-c flex-x-b h">
				<view class="">
					修改手机号
				</view>
				<view class="">
					<input type="text" v-if="!showT" @blur="onInputT" >
				</view>
				<view class="" @click="showTChange" v-if="showT">
					{{userInfo.mobile}}
				</view>
				<!-- <view class="">
					{{userInfo.mobile}}
				</view> -->
			</view>
		</view>
		<view class="flex flex-x-a m-t">
			<view class="btn">
				注销
			</view>
			<view class="btn bg_g" @click="handleLogout">
				退出
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import * as UserApi from '@/api/user'
	import * as Api from '@/api/recovery'
	import AvatarImage from '@/components/avatar-image'
	import * as UploadApi from '@/api/upload'
	export default{
		components: {
			AvatarImage
		},
		data(){
			return{
				userInfo:{},
				show:true,
				showT:true,
				showP:true,
				imageList:[],
				avatar_url:'../../static/logo.png'
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			
			onInputTwo(e){
				console.log(e.target.value)
				Api.updateInfo({
					nick_name:e.target.value
				})
				  .then(result => {
					  this.show=!this.show
					  this.getUserInfo()
				  })
				
			},
			onInputT(e){
				console.log(e.target.value)
				Api.updateInfo({
					mobile:e.target.value
				})
				  .then(result => {
					  this.showT=!this.showT
					  this.getUserInfo()
				  })
				
			},
			onInputP(e){
				console.log(e.target.value)
				Api.updateInfo({
					password:e.target.value
				})
				  .then(result => {
					  this.showP=!this.showP
					  this.getUserInfo()
				  })
				
			},
			handleLogout() {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => 
								app.onRefreshPage()
								)
						}
					}
				})
			},
			onRefreshPage(){
				uni.switchTab({
					url:'/pages/user/index'
				})
			},
			// 获取当前用户信息
			getUserInfo() {
				const app = this
				console.log(app.isLogin)
				return new Promise((resolve, reject) => {
					UserApi.info({
					}, {
							load: app.isFirstload
						})
						.then(result => {
							app.userInfo = result.data.userInfo
							app.avatar_url = result.data.userInfo.avatar_url
							resolve(app.userInfo)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},
			
			showChange(){
				this.show=!this.show
			},
			showTChange(){
				this.showT=!this.showT
			},
			showPChange(){
				this.showP=!this.showP
			},
			
			
			
			chooseImage() {
			  const app = this
			  const oldImageList = app.imageList
			  // 选择图片
			  uni.chooseImage({
			    count: 1,
			    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			    success({ tempFiles }) {
			      // tempFiles = [{path:'xxx', size:100}]
			      app.imageList = oldImageList.concat(tempFiles)
				  console.log(app.imageList,111)
				  app.avatar_url=app.imageList[0].path
				  app.uploadFile()
			    }
			  });
			},
			uploadFile() {
			  const app = this
			  const { imageList } = app
			  // 批量上传
			  return new Promise((resolve, reject) => {
			    if (imageList.length > 0) {
			      UploadApi.image(imageList)
			        .then(fileIds => {
						console.log(imageList,111)
						Api.changeAvatar({
							avatar_id:fileIds.toString()
						})
						.then(result => {
							console.log(result)
							uni.showToast({
								title:result.message
							})
						})
			          resolve(fileIds)
			        })
			        .catch(reject)
			    } else {
			      resolve()
			    }
			  })
			}
		}
	}
	
</script>

<style>
	.flex {
		display: flex;
	}
	.flex-x-a{
		justify-content: space-around;
	}
	.flex-y-c{
		align-items: center;
	}
	.flex-x-b{
		justify-content: space-between;
	}
	.btn{
		width: 312rpx;
		height: 88rpx;
		background: rgba(102,179,71,0.1);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #66B347;
		line-height: 88rpx;
		text-align: center;
	}
	
	.bg_g{
		background: #66B347;
		color: #FFFFFF;
	}
	
	.bg_f{
		padding: 32rpx;
		background-color: #FFFFFF;
		margin: 20rpx 0 ;
	}
	.avar{
		width: 130rpx;
		height: 130rpx;
		margin-right: 20rpx;
	}
	.avar image{
		width: 100%;
		height: 100%;
	}
	
	.h{
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.m-t{
		margin-top: 150rpx;
	}
	
	
	.m-l{
		margin-left: 30rpx;
	}
	
	.user-avatar{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.user-avatar image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
</style>